<template>
  <div class="training-class-page">
    <!-- 标签页导航 -->
    <el-tabs v-model="activeTab" class="custom-tabs">
      <el-tab-pane label="所有培训班" name="all"></el-tab-pane>
      <el-tab-pane label="已开班" name="opened"></el-tab-pane>
      <el-tab-pane label="未开班" name="unopened"></el-tab-pane>
      <el-tab-pane label="已结束" name="ended"></el-tab-pane>

      <!-- 内容区域 -->
      <div class="class-list">
        <el-card
          v-for="item in filteredClasses"
          :key="item.id"
          class="class-card"
        >
          <div class="card-header">
            <span class="class-name">{{ item.className }}</span>
            <span class="class-tag" :class="item.statusClass">{{ item.statusText }}</span>
          </div>

          <div class="class-info">
            <div class="info-row">
              <div class="info-item">
                <span class="label">班级编号：</span>
                <span class="value">{{ item.classNo }}</span>
              </div>
              <div class="info-item">
                <span class="label">培训类型：</span>
                <span class="value">{{ item.type }}</span>
              </div>
              <div class="info-item">
                <span class="label">培训项目：</span>
                <span class="value">{{ item.project }}</span>
              </div>
            </div>

            <div class="info-row">
              <div class="info-item">
                <span class="label">开始日期：</span>
                <span class="value">{{ item.startTime }}</span>
              </div>
              <div class="info-item">
                <span class="label">截止日期：</span>
                <span class="value">{{ item.endTime }}</span>
              </div>
              <div class="info-item">
                <span class="label">培训地址：</span>
                <span class="value">{{ item.address }}</span>
              </div>
            </div>

            <div class="info-row">
              <div class="info-item">
                <span class="label">培训地点：</span>
                <span class="value">{{ item.location }}</span>
              </div>
              <div class="info-item">
                <span class="label">班主任：</span>
                <span class="value">{{ item.teacher }}</span>
              </div>
            </div>
            <div class="card-actions">
            <el-button
              type="primary"
              size="mini"
              class="detail-btn"
              @click="toggleDetail(item.id)"
            >
              {{ expandedClassId === item.id ? '折叠' : '培训班详情' }}
            </el-button>
          </div>

            <!-- 详情组件（动态显示） -->
            <TrainingDetailPage
              v-if="expandedClassId === item.id"
              :class-id="item.id"
              :class-data="item.item"
              class="detail-component"
            />
          </div>
        </el-card>

        <!-- 空状态提示 -->
        <div v-if="filteredClasses.length === 0" class="empty-state">
          <el-empty description="暂无培训班数据"></el-empty>
        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>
import TrainingDetailPage from './TrainingDetailPage.vue'
import {
  listTrainingClass,
  getTrainingClass,
  delTrainingClass,
  addTrainingClass,
  updateTrainingClass,
  importTrainingClass,
  getTrainingClassTemplate,
  trainingClassList,
  classHandover,
  myClasses,
  studentClasses

} from "@/api/training/TrainingClass";
import {
  listTrainingProgress
} from "@/api/training/registration";
export default {
  name: 'TrainingClassPage',
  components: {
    TrainingDetailPage
  },
  props:{
    userId:{
      type: String, required: true, default: ""
    }
  },
  data() {
    return {
      activeTab: 'all',
      expandedClassId: null, // 记录当前展开的班级ID
      trainingClasses: []
    }
  },
  computed: {
    // 根据标签页筛选班级数据
    filteredClasses() {
      switch (this.activeTab) {
        case 'opened':
          return this.trainingClasses.filter(item => item.statusText === '已开班')
        case 'unopened':
          return this.trainingClasses.filter(item => item.statusText === '未开班')
        case 'ended':
          return this.trainingClasses.filter(item => item.statusText === '已结束')
        default:
          return this.trainingClasses
      }
    }
  },
  watch:{
    userId:{
      handler(newVal) {
        this.getTrainingList()
      },
      immediate: true
    }
  },
  created(){
    // console.log(this.userId)
  },
  methods: {
    async getTrainingList() {
    const res = await studentClasses(this.$store.state.user.studentId);

    if (res.code === 200) {
      // 1. 定义映射关系（根据实际业务调整）
      // 培训类型映射（trainingType值→前端显示文本）
      const trainingTypeMap = {
        '1': '在职培训',
        '2': '专业培训',
        '3': '进阶培训',
        '4': '技能培训'
      };
      // 班级状态映射（classStatus值→{文本, 样式类}）
      const classStatusMap = {
        '1': { text: '未开班', class: 'status-unopened' },
        '2': { text: '已开班', class: 'status-opened' },
        '3': { text: '已结束', class: 'status-ended' }
      };

      // 2. 转换后端数据为前端所需结构
      this.trainingClasses = res.rows.map(row => ({
        id: row.trainingClassId, // 对应后端trainingClassId
        classNo: row.trainingClassCode || '无编号', // 培训班编号
        className: row.trainingClassName || '未知名称', // 培训班名称
        type: trainingTypeMap[row.trainingType] || '未知类型', // 培训类型
        project: row.trainingProjectNames || '无项目', // 培训项目
        startTime: row.startDate ? `${row.startDate}` : '未设置', // 开始时间
        endTime: row.endDate ? `${row.endDate}` : '未设置', // 结束时间
        address: row.trainingAddress || '未设置', // 培训地址
        location: row.trainingVenue || row.actualTrainingVenue || '未设置', // 培训地点
        teacher: row.headTeacher2Name!==null && row.handoverStatus ==="2" ?row.headTeacher2Name:row.headTeacher1Name, // 拼接班主任姓名
        statusText: classStatusMap[row.classStatus]?.text || '未知状态', // 状态文本
        statusClass: classStatusMap[row.classStatus]?.class || '', // 状态样式类
        item:row,
      }));
    } else {
      // 错误处理
      this.$message.error(res.msg || '获取培训班列表失败');
      this.trainingClasses = []; // 清空列表
    }
  },
    // 切换详情展开/折叠状态
    toggleDetail(classId) {
      this.expandedClassId = this.expandedClassId === classId ? null : classId
    }
  }
}
</script>

<style scoped>
.training-class-page {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 64px); /* 减去顶部导航高度 */
}

/* 标签页样式 */
.custom-tabs {
  background-color: #fff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 覆盖Element UI标签页样式 */
::v-deep .el-tabs__header {
  margin-bottom: 20px;
}

::v-deep .el-tabs__item {
  font-size: 14px;
  color: #6b7280;
  padding: 0 16px;
}

::v-deep .el-tabs__item.is-active {
  color: #165dff;
  font-weight: 500;
}

::v-deep .el-tabs__active-bar {
  background-color: #165dff;
  height: 2px;
}

/* 班级列表样式 */
.class-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 卡片样式 */
.class-card {
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.class-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #f9fafb;
  border-bottom: 1px solid #f0f2f5;
}

.class-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
}

.class-tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-opened {
  background-color: #e6f7ee;
  color: #00b42a;
}

.status-unopened {
  background-color: #fff7e6;
  color: #ff7d00;
}

.status-ended {
  background-color: #f2f3f5;
  color: #86909c;
}

/* 卡片内容区 */
.class-info {
  padding: 16px 20px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-bottom: 12px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-item {
  display: flex;
  align-items: center;
  min-width: 220px;
}

.label {
  font-size: 14px;
  color: #6b7280;
  margin-right: 8px;
  white-space: nowrap;
}

.value {
  font-size: 14px;
  color: #1f2329;
  line-height: 1.5;
}

/* 详情组件样式 */
.detail-component {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #e8e8e8;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 卡片操作区 */
.card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid #f0f2f5;
  background-color: #f9fafb;
}

.detail-btn {
  padding: 4px 12px;
  font-size: 13px;
}

/* 空状态样式 */
.empty-state {
  padding: 48px 0;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .info-item {
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .training-class-page {
    padding: 16px;
  }

  .info-row {
    gap: 12px 16px;
  }

  .info-item {
    min-width: 100%;
  }
}
</style>
